export default {
  data() {
    return {
      // 设置属性
      mixinViewModuleOptions: {
        activatedIsNeed: true, // 此页面是否在激活（进入）时，调用查询数据列表接口？
        getDataListUrl: '', // 数据列表接口，API地址
        isPage: true, // 数据列表接口，是否需要分页？
        el_table: true, // 是否el-table
        deleteUrl: '', // 删除接口，API地址
        batchDelKey: 'id', // 删除接口，批量状态下由那个key进行标记操作？比如：pid，uid...
        exportUrl: '', // 导出接口，API地址
        addUrl: '', // 新增
        updateUrl: '' // 修改
      },
      // 查询条件
      searchForm: {
        sortMap: {} // 排序，asc／desc
      },
      dataList: [], // 数据列表
      page: 1, // 当前页码
      limit: 10, // 每页数
      total: 0, // 总条数
      layouts: ['Total', 'Sizes', 'FullJump', 'PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump'], // 页脚分页布局
      dataListLoading: false, // 数据列表，loading状态
      dataListSelections: [], // 数据列表，多选项
      batchBtnDisabled: true, // 批量按钮禁用
      showSearch: true, // 是否显示查询
      headerCellStyle: { background: '#eef1f6', color: '#606266' }, // 表头样式
      ref: 'tableRef', // 表格对象
      cloumn_all_checked: true // 列全选
    }
  },
  created() {
    if (this.mixinViewModuleOptions.activatedIsNeed) {
      this.getDataList()
    }
  },
  beforeUpdate() {
    if (this.mixinViewModuleOptions.el_table) {
      this.$nextTick(() => { // 在数据加载完，重新渲染表格--防止过滤列时表格抖动
        this.$refs[this.ref].doLayout()
      })
    }
  },
  computed: {
    /* 这里使用了getter和setter，这样写的好处不用自己手动监听复选框的选中事件 */
    checkedTableColumns: {
      get() {
        // 返回选中的列名
        var zero = []
        for (var column in this.showColumns) {
          if (this.showColumns[column].show) {
            zero.push(column)
          }
        }
        return zero
      },
      set(checked) {
        var i = 0
        // 设置表格列的显示与隐藏
        for (var column in this.showColumns) {
          // 如果选中，则设置列显示
          if (checked.includes(column)) {
            this.showColumns[column].show = true
          } else {
            // 如果未选中，则设置列隐藏
            this.showColumns[column].show = false
            i++
          }
        }
        this.cloumn_all_checked = i === 0
      }
    }
  },
  methods: {
    cloumnAllChecked(data) {
      this.cloumn_all_checked = data
      for (var column in this.showColumns) {
        this.showColumns[column].show = this.cloumn_all_checked
      }
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true
      this.searchForm.page = this.mixinViewModuleOptions.isPage ? this.page : null
      this.searchForm.pageSize = this.mixinViewModuleOptions.isPage ? this.limit : null
      const config = {
        url: this.mixinViewModuleOptions.getDataListUrl,
        method: 'post',
        data: this.searchForm
      }
      this.$axios(config).then(res => {
        this.dataListLoading = false
        this.dataList = res.data.records
        this.total = res.data.total
      }).catch(() => {
        this.handleDataCatch()
      })
    },
    // 处理获取数据接口异常
    handleDataCatch() {
      this.dataList = []
      this.total = 0
      this.dataListLoading = false
    },
    // 多选---del
    dataListCheckboxChangeHandle({ selection }) {
      this.dataListSelections = selection
      this.batchBtnDisabled = this.dataListSelections.length <= 0
    },
    // 多选
    dataListSelectionChangeHandle(val) {
      this.dataListSelections = val
      this.batchBtnDisabled = this.dataListSelections.length <= 0
    },
    // 排序
    dataListSortChangeHandle(data) {
      this.searchForm.sortMap = {}
      if (!data.order || !data.prop) {
        this.searchForm.sortMap = {}
      } else {
        const key = data.prop
        const vaule = data.order.replace(/ending$/, '')
        this.searchForm.sortMap = { [key]: vaule }
      }
      this.getDataList()
    },
    // 分页, 每页条数
    pageSizeChangeHandle(val) {
      this.page = 1
      this.limit = val
      this.getDataList()
    },
    // [分页] 切换事件
    handlePageChange({ currentPage, pageSize }) {
      this.page = currentPage
      this.limit = pageSize
      this.getDataList()
    },
    // 调用接口删除
    delete(data, name, ref) {
      const delMsg = name ? '正在删除 [' + name + ']  是否继续?' : '正在批量删除, 是否继续?'
      this.$confirm(delMsg, '提示', {
        cancelButtonClass: 'btn-custom-cancel',
        type: 'warning',
        closeOnClickModal: false
      }).then(() => {
        this.dataListLoading = true
        const config = {
          url: this.mixinViewModuleOptions.deleteUrl,
          method: 'post',
          data: data
        }
        this.$axios(config).then(res => {
          if (ref) {
            this.$refs[ref].removeCheckboxRow()
          }
          this.dataListLoading = false
          this.calculationPage(this.dataListSelections.length > 0 ? this.dataListSelections.length : 1)
          this.getDataList()
          this.$message.success(res.msg)
        }).catch(() => {
          this.dataListLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 删除后计算分页
    calculationPage(delNum) {
      // 为了在删除最后一页的最后一条数据时能成功跳转回最后一页的上一页
      const totalPage = Math.ceil((this.total - delNum) / this.limit) // 总页数
      this.page = this.page > totalPage ? totalPage : this.page
      this.page = this.page < 1 ? 1 : this.page
    },
    searchResetForm() { // 重置输入框
      this.searchForm = {
        sortMap: {}
      }
      // 清空页面选择的排序按钮
      this.$refs[this.ref].clearSort()
      this.getDataList()
    },
    initDialog(ref, row, val) { // 初始化弹框，第三个参数配合业务使用
      this.$refs[ref].initDialog(row, val)
    }
  }
}
